<template>
    <view class="notice-card" @click="onClickItem(data)">
        <view class="card-container">
            <view class="content-wrapper">
                <text class="title">
                    <text class="unread" v-if="!data.msgStatus" ></text> {{ data.msgTitle }}
                    <!-- <text class="unread" v-if="!data.msgStatus" ></text> {{ data.msgTitle }} -->
                </text>
                <text class="tag">{{ data.msgContent }}</text>
            </view>
            <view class="footer-wrapper">
                <text class="time">{{  getTime(data)  }}</text>
                <!-- <text class="detail-btn" v-if="detailLink(data)" >查看详情</text> -->
                <text class="detail-btn"  >查看详情</text>
            </view>
        </view>
    </view>
</template>

<script>
import dayjs from "dayjs";
export default {
    props: {
        typeData: { type: Object },
        data: { type: Object, required: true }
    },
    data() {
        return {};
    },
    methods: {
        getTime(item) {
            if (!item.sendTime) return "";
            return dayjs(item.sendTime).format("YYYY-MM-DD HH:mm");
        },
        onClickItem(data) {
            this.$emit("clickItem", data);
        },
        detailLink(its) {
            console.log(its,this.typeData, 'its')
            // 过滤不需要显示详情的标题
            if (['跟进人离职', '调拨入库通知', '调拨出库通知', '调拨入库提醒', '调拨出库提醒'].includes(its.msgTitle)) {
                return false;
            }
            // 过滤特定模板代码
            if (its.templateCode && its.templateCode.indexOf('GOOD_ORDER') > -1) {
                return false;
            }
            // 类型为9时显示详情
            if (this.typeData?.msgType * 1 === 9) {
                return true;
            }
            // 检查跳转链接配置
            let jumpUrlsJson = its.jumpUrlsJson;
            if (jumpUrlsJson) {
                if (jumpUrlsJson.app && jumpUrlsJson.app.length) {
                    return true;
                }
                if (jumpUrlsJson.applet && jumpUrlsJson.applet.length) {
                    return true;
                }
            }
            return false;
        }
    }
};
</script>

<style lang="scss" scoped>


.notice-card {
    padding: 20rpx;
    box-sizing: border-box;
}

.unread {
    width: 24rpx;
    height: 24rpx;
    display: inline-block;
    background-color: #ff4444;
    border-radius: 50%;
    margin-right: 8rpx;
    flex-shrink: 0;
}

.card-container {
    width: 100%;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-sizing: border-box;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 内容区域 */
.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-bottom: 30rpx;
}

/* 标题样式 */
.title {
    font-size: 36rpx;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}

/* 标签样式 */
.tag {
    font-size: 28rpx;
    //   color: #ff503e;
    // background-color: #fff5f5;
    padding: 4rpx 16rpx;
    // border-radius: 16rpx;
    display: inline-block;
    width: fit-content;
}

/* 底部信息区域 - 两端对齐 */
.footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #f5f5f5;
}

/* 时间文本 */
.time {
    font-size: 26rpx;
    color: #999999;
}

/* 查看详情按钮 */
.detail-btn {
    font-size: 28rpx;
    color: #4096ff;
    padding: 8rpx 16rpx;
    box-sizing: border-box;
}
</style>